.element{
    width: 100%;
    height: 100%;
}

.element .hd{
    width: 100%;
    height: 60px;
}

.element .hd ul{
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}

.element .hd ul li{
    width: 25%;
    height:100%;
}

.element .hd ul li:nth-child(1){
    background: url("../../img/lvjing-off.png");
    background-repeat: no-repeat;
    /*background-size: contain;*/
    background-position: center center;
}
.element .hd ul li:nth-child(2){
    background: url("../../img/graph-off.png");
    background-repeat: no-repeat;
    /*background-size: contain;*/
    background-position: center center;
}
.element .hd ul li:nth-child(3){
    background: url("../../img/font-off.png");
    background-repeat: no-repeat;
    /*background-size: contain;*/
    background-position: center center;
}
.element .hd ul li:nth-child(4){
    background: url("../../img/music-off.png");
    background-repeat: no-repeat;
    /*background-size: contain;*/
    background-position: center center;
}


.element .hd ul li:nth-child(1).on{
    background: url("../../img/lvjing-on.png");
    background-repeat: no-repeat;
    /*background-size: contain;*/
    background-position: center center;
}
.element .hd ul li:nth-child(2).on{
    background: url("../../img/graph-on.png");
    background-repeat: no-repeat;
    /*background-size: contain;*/
    background-position: center center;
}
.element .hd ul li:nth-child(3).on{
    background: url("../../img/font-on.png");
    background-repeat: no-repeat;
    /*background-size: contain;*/
    background-position: center center;
}
.element .hd ul li:nth-child(4).on{
    background: url("../../img/music-on.png");
    background-repeat: no-repeat;
    /*background-size: contain;*/
    background-position: center center;
}



